* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  transition: all 1500ms ease-in-out;
  background: #0000ff;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #ffffff;
  font-weight: 700;
  font-size: 25px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#app {
  transition: all 1500ms ease-in-out;
  background: #ffffff;
  width: 50vw;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3f18eb;
  flex-direction: column;
  font-weight: 700;
  font-size: 25px;
  border-radius: 10pt;
  /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
}
.nav {
  transition: all 1500ms ease-in-out;
  width: 100vw;
  height: 10vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ffffff;
  color: #3f18eb;
  font-weight: 700;
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  list-style: none;
}
.nav li {
  transition: background-color 700ms ease-in-out, color 700ms ease-in-out, font-size 700ms ease-in-out;
  display: inline-flex;
  width: 25%;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #3f18eb;
  font-weight: 700;
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  cursor: pointer;
  height: 10vh;
}
.nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #3f18eb;
  text-decoration: none;
  transition: color 700ms ease-in-out, font-size 700ms ease-in-out;
}
.nav li:hover {
  background: #3f18eb;
  color: #ffffff;
  font-size: 25px;
}
.nav li:hover a {
  color: #ffffff;
  font-size: 25px;
}
@media screen and (max-width: 480px) {
  body {
    transition: all 1500ms ease-in-out;
    flex-direction: column;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100vw;
    height: 100vh;
  }
  .nav {
    transition: all 1500ms ease-in-out;
    height: auto;
  }
  .nav li {
    width: 100%;
    height: 10vh;
  }
  #app {
    transition: all 1500ms ease-in-out;
    width: 100%;
    height: auto;
  }
  .timer {
    transition: all 1500ms ease-in-out;
    width: 100vw;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    color: #3f18eb;
    filter: drop-shadow(0px 0px 10px #0fd1cb);
  }
  #timer {
    transition: all 1500ms ease-in-out;
    width: 100vw;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #18e4eb, #b60ae6, #18e4eb);
    color: #3f18eb;
    font-size: 20px;
    text-align: center;
    animation: timer 3s linear infinite;
    background-size: 200% ;
  }
  #timer:hover {
    transition: all 1500ms ease-in-out;
    width: 100vw;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #18d2eb;
    animation: timer 3s linear infinite;
    cursor: pointer;
    filter: blur(0rem);
  }
}
@keyframes timer {
  0% {
    background-position-x: 200% ;
  }
}
